<template>
    <div class="cgs">
        <div class="cgs-container register-container flex-col">
            <div class="cgs-container-title flex-col">
                <span class="info1">{{title}}</span>
                <span class="info2">WELCOME&nbsp;TO&nbsp;{{title}}</span>
            </div>
            <div class="cgs-input-div">
                <span class="user" />
                <input v-model="tenantName" @blur="handleInputBlur($event, 'tenantName')" placeholder="请输入组织名称">
                <label><div v-if="tenantLabel" class="label-span">!</div>{{tenantLabel}}</label>
            </div>
            <div class="cgs-input-div">
                <span class="telephone" />
                <input v-model="username" @blur="handleInputBlur($event, 'username')" placeholder="请输入注册账号">
                <label><div v-if="userLabel" class="label-span">!</div>{{userLabel}}</label>
            </div>
            <div class="cgs-input-div">
                <span class="lock" />
                <input v-model="password" type="password" @blur="handleInputBlur($event, 'password')" placeholder="密码，6-20位">
                <label><div v-if="passwordLabel" class="label-span">!</div>{{passwordLabel}}</label>
            </div>
            <div style="margin-top: 30px">
                <el-button type="primary" :loading="buttonLoading" @click="handleInit">{{buttonLoadText}}</el-button>
            </div>
            <a class="registration-info" href="http://beian.miit.gov.cn" target="_blank">{{registration}}</a>
        </div>

        <div class="cgs-bottom flex-row">
            <div class="cgs-bottom-triangle">
                <div class="cgs-bottom-down"></div>
                <div class="cgs-bottom-up"></div>
            </div>
        </div>
    </div>

</template>
<script>
    import {initializeDataBase, getConfigApi} from "@/api/user";

    import {setConfig} from "../../util/auth";
    export default {
        name: "init",
        components: {
        },
        data() {
            return {
                tenantName: '',
                username: "",
                password: "",
                tenantLabel: "",
                userLabel: "",
                passwordLabel: "",
                buttonCheck: "",
                buttonLoading: false,
                buttonLoadText: "初始化"
            };
        },
        watch: {
        },
        created() {
        },
        mounted() {
        },
        computed: {
            title() {
                return this.$store.state.sysInfo.name.toUpperCase()
            },
            registration(){
                return this.$store.state.sysInfo.domainRegistrationInfo
            }
        },
        props: [],
        methods: {
            handleInputBlur (e, type, action) {
                let value = e;
                if (!action) {
                    value = e.target.value
                }
                value = value || ''
                value = value.trim();
                let flag = true;
                switch (type) {
                    case "tenantName":
                        if (value === "" || !value) {
                            this.tenantLabel = "请输入组织名称！"
                            flag = false;
                        } else {
                            this.tenantLabel = ""
                        }
                        break;
                    case "username":
                        if (value === "" || !value) {
                            this.userLabel = "请输入账号！"
                            flag = false;
                        } else {
                            this.userLabel = ""
                        }
                        break;
                    case "password":
                        if (value === "" || !value) {
                            this.passwordLabel = "请输入密码！"
                            flag = false;
                        } else if (value.length < 6) {
                            this.passwordLabel = "密码少于6位！"
                        } else if (value.length > 20) {
                            this.passwordLabel = "密码大于20位！"
                        } else {
                            this.passwordLabel = ""
                        }
                        break;
                }
                return flag;
            },
            handleInit () {
                let flagUser = this.handleInputBlur(this.username, 'username', true);
                let flagPassword = this.handleInputBlur(this.password, 'password', true);
                let flagTenant = this.handleInputBlur(this.tenantName, 'tenantName', true);
                if (flagUser && flagPassword && flagTenant) {
                    this.buttonLoading = true;
                    this.buttonLoadText = "初始化中...";

                    const param = {
                      tenantName: this.tenantName,
                      username: this.username,
                      password: this.password
                    }

                    initializeDataBase(param).then(res=>{
                        if(res.data && res.data.success){

                            getConfigApi().then((res) => {
                                if(res.data && res.data.success){
                                    setConfig(res.data.data);
                                    this.$router.push({path: "/login"});
                                }
                                this.buttonLoading = false;
                                this.buttonLoadText = "初始化";
                            })
                        }else {
                            this.$message.error("初始化失败！")
                        }
                    }).catch(() => {
                        this.buttonLoading = false;
                        this.buttonLoadText = "初始化";
                    });
                }
            }
        }
    };
</script>

<style src="../login/index.css"></style>
<style src="../register/index.css"></style>
